@charset "utf-8";

@function vw($a){
    @return ( $a / 320 ) * 100vw;
}

body{
    overflow: hidden;
}

.web{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.ziliao-bg{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.5);
    animation: fangd 20s both;
    img{
        width: 100%;
        height: 100%;
    }
}
@keyframes fangd{
    0%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}

.ziliao-text{
    position: absolute;
    z-index: 3;
    top: 25%;
    left: 23%;
    font-size: vw(11);
    line-height: vw(16);
    text-align: center;
}

.ziliao-kuang{
    position: absolute;
    z-index: 3;
    top: 36%;
    left: vw(12.75);
    width: vw(294.5);
    height: vw(125);
    background: url(../img/choujiang/ziliao-kuang.png);
    background-size: 100% 100%;
    >div{
        position: absolute;
        width: vw(135);
        height: vw(20);
        box-sizing: border-box;
        input{
            width: 100%;
            height: 100%;
            border: none;
            background: transparent;
        }
    }
    .ziliao-name{
        top: 26%;
        left: 32%;
    }
    .ziliao-tel{
        top: 52%;
        left: 32%;
    }
}

.xiayiguan{
    z-index: 3;
    li .page3-you:first-of-type{
        left: 12%;
        top: 34%;
    }
    li .page3-you:nth-of-type(2){
        left: 15%;
        top: 34%;
    }
    li .page3-you:nth-of-type(3){
        right: 47%;
        top: 34%;
    }
    li .page3-you:nth-of-type(4){
        right: 50%;
        top: 34%;
    }
}

@keyframes slide-out-bck-center{
    0%{
        transform:translateZ(0);
        opacity:1;
    }
    100%{
        transform:translateZ(-1100px);
        opacity:0;
    }
}
.slide-out-bck-center{
    animation:slide-out-bck-center .5s cubic-bezier(.55,.085,.68,.53) both;
}

@keyframes scale-in-center{
    0%{
        transform:scale(0);
        opacity:1;
    }
    100%{
        transform:scale(1);
        opacity:1;
    }
}
.scale-in-center{
    animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both;
}
.moo{
    animation: youzuo 2s both;
}

@keyframes youzuo{
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0);
    }
}

.ziliao-s{
    position: absolute;
    z-index: 3;
    top: 42%;
    left: 22%;
    line-height: vw(16);
    font-size: vw(11);
    text-align: center;
    display: none;
}
